<template>
  <div class="box">
    <!-- 左1下box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Left"
      title="作业人员监测"
    >
      <div slot="tab" class="MainCoal-box-tab">
        <div
          v-for="(item, ind) in titleTwotab"
          :key="ind"
          :class="['btn', isTwobtn === item ? 'isbtn' : '']"
          @click="clickTwoTitleTab(item)"
        >
          {{ item }}
        </div>
      </div>
      <!-- 作业人员监测 统计 -->
      <div :slot="Twocount" class="MainCoal-box-content">
        <div class="now-person-num"><span style="font-size: 1rem;">当前人员数量</span><span><span style="color:#1ED9FF;font-size:1.125rem">47</span><span style="color:#8D8D8D;font-size:0.75rem;">人</span></span></div>
        <div class="now-team-name"><span style="font-size: 1rem;">区队名称</span><span><span style="color:#1ED9FF;font-size:1rem">综采一队</span></span></div>
        <div class="outage">
          <div class="Loadbox">
            <div class="RingChartbox">
              <RoseChart
              class="RoseChartpic"
              :data="RoseChart"
              :color="['#7BA6FF', '#02E4FF', '#12D0A1', '#F4BE2D','#F0964D','#A6ADB7']"
              />
            </div>
            <div class="RingCharttext" >
              <div class="littletext" v-for="(v,i) in RoseChart" :key="i" >
                  <div class="pieText" :style="`border-left:3px solid ${v.color}`">{{v.x}}</div>
                  <div class="pieNum">{{v.y}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 作业人员监测  列表 -->
      <div
        :slot="Twolist"
        class="MainCoal-box-content"
        style="height: 137px;"
      >
        <div class="center-select"></div>
        <div class="outageList">
          <div class="cont">
            <p class="title">arqwrfq</p>
          </div>
          <div class="state">
            <span>40204工作面</span>
            <span>2022-07-20 10:14:45</span>
          </div>
        </div>
      </div>
    </HerinContainer>
  </div>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import RoseChart from '@/components/chart/pie/RoseChart1';

export default {
  components: {
    HerinContainer,
    RoseChart
  },
  data() {
    return {
      val: '',
      RoseChart: [
        { x: '跟班队干', y: 1, color: '#7BA6FF', series: '100' },
        { x: '爆破', y: 10, color: '#02E4FF', series: '100' },
        { x: '维修', y: 11, color: '#12D0A1', series: '100' },
        { x: '电工', y: 13, color: '#F4BE2D', series: '100' },
        { x: '三机巡检', y: 12, color: '#F0964D', series: '100' }
      ],
      color: ['#34C8FF', '#2AD49A', '#00FDFF'],
      Twocount: 'content',
      Twolist: '',
      titleTwotab: ['统计', '列表'],
      isTwobtn: '统计',
      // 第一个选择框
      selectPump1: '',
      selectOption1: []
    };
  },
  methods: {
    // 点击传感器调校监测tab  右中
    clickTwoTitleTab(item) {
      this.isTwobtn = item;
      if (item === '列表') {
        this.Twolist = 'content';
        this.Twocount = '';
      } else if (item === '统计') {
        this.Twolist = '';
        this.Twocount = 'content';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box {
  margin-top: .625rem;
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content {
    .mouldbox {
      margin-top: 1.875rem;
    }
    .mouldbox:first-child {
      margin-top: 0.3125rem;
    }
  }
  .num {
    font-size: 16px;
    text-align: right;
    font-family: Helvetica-bold;
    font-weight: 900;
  }
  .piece {
    color: rgba(131, 131, 131, 100);
    font-size: 12px;
    text-align: left;
    font-family: Helvetica-regular;
    margin: 0 0.9375rem 0 0.3125rem;
    display: inline;
  }
  .sensorSum {
    display: flex;
    width: 20.625rem;
    height: 2.5rem;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    padding: 0 0.625rem;
    p {
      display: flex;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      text-align: left;
      font-family: Helvetica-regular;
    }
  }
  .now-person-num,.now-team-name{
    height: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: .25rem;
    padding: 0 .625rem;
    color: #F8F8F8;
    background-color: rgba(255, 255, 255, 0.1);
    margin-bottom: .625rem;
  }
  .charttitle {
    font-size: 0.75rem;
    color: $light2Grey;
    margin: 0.625rem 0;
  }
  .outageList {
    .cont {
      justify-content: space-between;
      display: flex;
      p {
        align-items: center;
        display: flex;
      }
      .title {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        margin: 0.625rem 0;
      }
    }
    .state {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: rgba(173, 173, 173, 100);
    }
  }
  .broken {
    height: 2.375rem;
    width: 20.625rem;
    display: flex;
    justify-content: space-between;
    div {
      width: 10rem;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 0.625rem;
    }
    .title {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
    }
    .num {
      color: rgba(0, 253, 255, 100);
      font-size: 16px;
      font-weight: 900;
    }
  }
  .sensorSort {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .chat {
      width: 8.5625rem;
      height: 7.4375rem;
    }
    .right {
      width: 8.125rem;
      height: 7.4375rem;
      display: flex;
      flex-direction: column;
      align-content: space-between;
      p {
        margin: 0;
      }
      .point {
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
      }
      .title {
        color: rgba(173, 173, 173, 100);
        font-size: 12px;
        margin: 0 0.75rem 0 0.375rem;
        display: inline-block;
        width: 2.25rem;
      }
      .num {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        margin-right: 0.3125rem;
      }
    }
  }
  .outage {
    height: 8.5rem;
  }
}
  .Loadbox{
    height: 119px;
    display: flex;
    align-items: flex-end;
  }
  .RingChartbox{
    height:109px;
    width: 8.3125rem;
    margin-right: 1.9375rem;
    text{
      color: #AAAAAA;
      font-size: .75rem;
    }
    total{
      font-size: 1.25rem;
      color: #FFFFFF;
    }
  }
  .RingCharttext{
    width: 180px;
    height: 96px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    .littletext{
      margin-bottom: .9375rem;
      .pieText{
      color: #CDDEEF;
      font-size: .75rem;
      margin-bottom: .3125rem;
      margin-right: 1.25rem;
      height: .375rem;
      line-height: .375rem;
      padding-left: .5rem;
    }
    .pieNum{
      color: #FFFFFF;
      font-size: .75rem;
      padding-left: .875rem;
    }
    }

  }
</style>
